<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SearchFriend</title>
    <style>
        a{
            text-decoration: none;
        }
        .title{
            width: 100%;
            display: block;
            height: 60px;
            background-color: #009BDB;
        }
        .title1{
            width: 30%;
            height: 60px;
            float: left;
        }
        .headline1{
            margin: 15px 10px 15px;
            height: 30px;
            font-size: 20px;
            color: white;
        }
        .headline2{
            margin: 15px 10px 15px;
            height: 30px;
            font-size: 20px;
            color: white;
            text-align: center;
        }
        .headline3{
            margin: 15px 10px 15px;
            height: 30px;
            font-size: 20px;
            color: white;
            text-align: center;
        }
        .headline4{
            margin: 15px 10px 15px;
            height: 30px;
            font-size: 20px;
            color: white;
            text-align: center;
        }
        .title2, .title3, .title4, .title5{
            width: 17.5%;
            height: 60px;
            float: left;
            position: relative;
        }
        .title2 div, .title3 div, .title5 div{
            left: 0;
            top: 0;
            position: absolute;
            width: 0;
            height: 0;
            background-color: white;
            opacity: 0.3;
            transition: width 1s;
        }
        .title2:hover div, .title3:hover div, .title5:hover div{
            width: 100%;
            height: 100%;
            cursor: pointer;
            border-radius: 3px;
        }
        .total{
            width: 100%;
            display: block;
            height: 120px;
            background-color: #EBF2F9;
        }
        .search, .Select{
            width: 60%;
            height: 60px;
            float: left;
            text-align: right;
        }
        .btn{
            width: 40%;
            height: 60px;
            float: left;
        }
        .searchfriends{
            border: solid 0.5px rgb(100, 100, 204);
            width: 50%;
            height: 34px;
            font-size: 17px;
            margin-top: 11px;
        }
        .remindinfo{
            width: 200px;
            height: 30px;
            float: right;
            margin-top: 15px;
            margin-right: 200px;
        }
        .btnSearch{
            border: 0;
            border-radius: 3px;
            width: 100px;
            height: 40px;
            margin-top: 11px;
            margin-left: 30px;
            font-size: 18px;
            font-family: sans-serif;
            background-color: rgb(79, 121, 238);
            color: white;
        }
        .select1, .select2{
            width: 72px;
            height: 20px;
            margin: 10px;
        }
        .table1{
            width: 100%;
            float: left;
        }
        .user{
            margin: auto;
        }
        td{
            width: 200px;
        }
        .btnSearch:hover{
            background-color: rgb(79, 79, 224);
            cursor: pointer;
        }
        #addfriend{
            width: 60px;
            height: 25px;
            margin-left: 2px;
            margin-top: 2px;
            border-radius: 3px;
            border: 0;
            color: white;
            background-color: #8FC0E7;
        }
        #addfriend:hover{
            cursor: pointer;
            background-color: #009BDB;
            transition: ease 0.3s;
        }
    </style>
</head>
<body>
<div class="title">
    <div class="title1">
        <h1 class="headline1">查找好友/群组</h1>
    </div>
    <div class="title2">
        <a href="SearchFriend.html"><h1 class="headline2">找人</h1></a>
        <div></div>
    </div>
    <div class="title3">
        <a href="SearchGroup.html"><h1 class="headline3">找群</h1></a>
        <div></div>
    </div>
    <div class="title4"></div>
    <div class="title5">
        <a><h1 class="headline4">返回主页</h1></a>
        <div></div>
    </div>
</div>
<div class="total">
    <form id="Search" method="post">
        <div class="search">
            <input type="text" name="userNum" placeholder="请输入QQ号码/昵称" class="searchfriends">
        </div>
        <div class="btn">
            <input id="submit" type="button" value="查找" class="btnSearch">
            <div class="remindinfo"></div>
        </div>
        <div class="Select">
            <select class="select1" name="sex">
                <option selected hidden disabled>性别</option>
                <option value="">不限</option>
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
            <select class="select2" name="age">
                <option selected hidden disabled>年龄</option>
                <option value="">不限</option>
                <option value="1">16-20岁</option>
                <option value="2">21-25岁</option>
            </select>
        </div>
    </form>
    <div style="width: 40%;height: 60px;float: left;"></div>
    <div class="table1">
        <table class="user">
            <thead>
            <tr>
                <td>QQ号码</td>
                <td>昵称</td>
                <td>添加好友</td>
            </tr>
            </thead>
            <tbody class="user_table">

            </tbody>
        </table>
    </div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    $(function(){
        let validateUrl = "http://" + window.location.host.toString() + "/search";
        let AddUrl = "http://" + window.location.host.toString() + "/add";
        $("#submit").click(function(){
            $.ajax({
                type: "POST",
                url: validateUrl,
                data: $("#Search").serialize(),
                dataType: "json",
                success: function(data){
                    $(".user_table").html("");
                    $(".remindinfo").html("");
                    if(data.length === 0){
                        $(".remindinfo").html("不存在此用户");
                    }
                    else{
                        for (let i=0; i<data.length; i++) {
                            $(".user_table").append("<tr>" + "<td>"+data[i].userNum +"</td>"+"<td>"+data[i].nickName+"</td>"+ "<td>"+"<input id='addfriend' value='+ 好友' type='button'>"+"</td>"+"</tr>");
                            var id = "addfriend";
                            var button = document.getElementById(id);
                            button.id = id + i;
                            button.onclick=function (){
                                $.ajax({
                                    type: "POST",
                                    url: AddUrl,
                                    data: data[i].userNum.serialize(),
                                    dataType: "json",
                                    success: function(res){
                                        alert();
                                    }
                                })
                            }
                        }
                    }
                }
            })
        })
    })
</script>
</body>
</html>